<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Heatmap</title>
  <script src="//www.google.com/jsapi"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script src="d3.v2.js"></script>
  <link rel="stylesheet" href="heatmap.css">
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
  <script src="heatmap.js"></script>
</head>

<body>

<div id="file-select-container">
  <input type="file" id="file-select">
</div>

<div id="body-container">
  <div class="text container" id="loading-json">Loading heatmap.json ...</div>

  <div id="main-body">
    <div class="container">
      <div class="text">Time Slice Size (microseconds):</div>
      <div id="time-slice-usecs" class="data"></div>
    </div>

    <div class="container">
      <div class="text">Memory Slice Size (bytes):</div>
      <div id="memory-slice-bytes" class="data"></div>
    </div>

    <div id="sliders" class="container">
      <div id="time-slider-container" class="container">
        <div id="time-slider" class="slider"></div>
        <div class="text">From time slice number</div>
        <div id="time-slider-min" class="data"></div>
        <div class="text">to</div>
        <div id="time-slider-max" class="data"></div>
      </div>
      <div id="memory-slider-container" class="container">
        <div id="memory-slider" class="slider"></div>
        <div class="text">From memory slice number</div>
        <div id="memory-slider-min" class="data"></div>
        <div class="text">to</div>
        <div id="memory-slider-max" class="data"></div>
      </div>

      <div id="button-container" class="container">
        <div class="text">Color relative to other memory blocks in:</div>
        <input type="checkbox" id="relative-selected-time-slices" />
        <div class="text">The selected time slices</div>
        <input type="checkbox" id="relative-same-time-slice" />
        <div class="text">Only the same time slice</div>
      </div>

      <input type="button" value="Refresh heat map" class="container" id="refresh-heat-map" />
    </div>

    <div id="heatmap-data-container" class="container">
      <div id="drawing-heatmap">Drawing Heat Map...</div>
      <div id="heatmap-body">
        <div id="misc-information" class="container">
          <div id="time-value-container" class="container">
            <div class="text">Position in Time:</div>
            <div id="time" class="data">?</div>
          </div>
          <div id="memory-value-container" class="container">
            <div class="text">Position in Memory:</div>
            <div id="memory" class="data">?</div>
          </div>
          <div id="value" class="data container">?</div>
        </div>
        <div id="time-summary-container" class="container">
	  <div id="time-summary"></div>
	</div>
        <div id="heatmap-container" class="container">
          <div id="heatmap"></div>
          <div id="functions"></div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>
